import React, { useEffect, useState } from 'react'
import { Toast, NavBar, Tabs, DropdownMenu, Button } from 'react-vant'
import { Search, BullhornO, Bell } from '@react-vant/icons'
import styles from '../Ordercss分支/Order.module.css'
import { useNavigate } from 'react-router-dom'
import { AntOutline, BellOutline, TruckOutline } from 'antd-mobile-icons'
import { http } from '../../utils'

export default function DinPage() {

  const navigate = useNavigate()
  const [type, settype] = useState([{ key: 0, name: '全部' }, { key: 1, name: '配送中' }, { key: 2, name: '待评价' }, { key: 3, name: '退款' }])
  const [value, setValue] = useState({ value1: 0 })
  const option1 = [
    { text: '外卖订单', value: 0 },
    { text: '自取订单', value: 1 }
  ]
  const [list, setlist] = useState([])

  const get = async () => {
    let res = await http.get('/cry/getcant')
    if (res.code == 200) {
      setlist(res.data)
    }
  }

  useEffect(() => {
    get()
  }, [])

  return (
    <div>
      <div className={styles.big_count}>
        <NavBar
          title={
            <DropdownMenu value={value} onChange={v => setValue(v)}>
              <DropdownMenu.Item name='value1' options={option1} />
            </DropdownMenu>
          }
          leftArrow={false}
          rightText={<Search fontSize={20} />}
          onClickRight={() => {navigate('/outlet/find')}}
        />
        <Tabs defaultActive={0} color='#ff644d'>
          {
            type.map(item => {
              return (
                <Tabs.TabPane key={item.key} title={item.name} />
              )
            })
          }
        </Tabs>
        <div className={styles.big}>
          <div className={styles.top}>
            <div className={styles.top_font}>
              <span style={{ fontSize: '0.15rem' }}>常买的店</span>
              <span style={{ fontSize: '0.14rem', color: '#999999' }}>查看更多＞</span>
            </div>
            <div className={styles.top_bot}>
              {
                list.map(item => {
                  return (
                    <div className={styles.top_div} key={item._id} onClick={()=>{navigate('/outlet/shop1')}}>
                      <img src="../../public/order1.png" alt="" />
                      <span style={{ fontSize: '0.15rem' }}>{item.name}</span>
                    </div>
                  )
                })
              }
              <div className={styles.top_div}>
                <img src="../../public/order1.png" alt="" />
                <span style={{ fontSize: '0.15rem' }}>华莱士</span>
              </div>
              <div className={styles.top_div}>
                <img src="../../public/order1.png" alt="" />
                <span style={{ fontSize: '0.15rem' }}>华莱士</span>
              </div>
              <div className={styles.top_div}>
                <img src="../../public/order1.png" alt="" />
                <span style={{ fontSize: '0.15rem' }}>华莱士</span>
              </div>
            </div>
          </div>
          <div className={styles.buy}>
            <div className={styles.buy_top}>
              <div>
                <img src="../../public/order1.png" alt="" />
                <span><span style={{ fontWeight: 'bold', fontSize: '0.17rem' }}>华莱士-爱情广场店</span>＞</span>
              </div>
              <span style={{ color: '#ff715c' }}>待付款</span>
            </div>
            <div className={styles.buy_two}>
              <img src="../../public/order3.png" alt="" />
              <img src="../../public/order3.png" alt="" />
              <img src="../../public/order3.png" alt="" />
              <img src="../../public/order3.png" alt="" />
            </div>
            <div className={styles.buy_bot}>
              <span style={{ fontWeight: 'bold' }}>应付款￥80</span>
              <Button color='linear-gradient(to right, #ff9600, #fe4801)' onClick={() => { navigate('/outlet/pay') }}>去付款</Button>
            </div>
          </div>
          <div className={styles.buy}>
            <div className={styles.buy_top}>
              <div>
                <img src="../../public/order1.png" alt="" />
                <span><span style={{ fontWeight: 'bold', fontSize: '0.17rem' }}>华莱士-爱情广场店</span>＞</span>
              </div>
              <span style={{ color: '#ff715c' }}>制作配送中</span>
            </div>
            <div className={styles.buy_two}>
              <img src="../../public/order3.png" alt="" />
              <div className={styles.buy_two_right}>
                <div>
                  <span>香辣鸡块汉堡包</span>
                  <span>￥25</span>
                </div>
                <span>x1</span>
              </div>
            </div>
            <div className={styles.buy_send} style={{ fontSize: '0.15rem' }}><TruckOutline />平台专送中&emsp;<span style={{ color: '#ff9900' }}>已超时12分钟</span></div>
            <div className={styles.buy_boom}>
              <span style={{ fontSize: '0.14rem', color: '#fca696' }}><BellOutline />再次发起催单</span>
              <h5>实付款￥25</h5>
            </div>
          </div>
        </div>

      </div>
    </div>
  )
}
